<template>
  <view class="l-navigation-bar-box" :style="style">
    <l-status-bar />
    <view class="l-navigation-bar flex-row align-center padding-lr-30">
      <text class="text-32" :style="{color}">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LNavigationBar',
  props: {
    position: {
      type: String,
      default: ''
    },
    bgColor: {
      type: [String, Array], // String:纯色  Array:渐变
      default: ''
    },
    color: {
      type: String,
      default: '#030303'
    },
    direction: {
      type: String,
      default: 'to right'
    },
    title: {
      type: String,
      default: ''
    },
    scrollTop: {
      type: Number,
      default: 0
    },
    immerse: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    opacity() {
      if (this.immerse && this.scrollTop < 101) {
        return this.scrollTop / 100
      } else {
        return 1
      }
    },
    style() {
      let str = this.background
      str += `position: ${this.immerse ? 'fixed' : this.position};`
      str += `opacity: ${this.opacity};`
      return str
    },
    background() {
      const type = typeof this.bgColor
      if (type === 'string') {
        return `background: ${this.bgColor};`
      } else {
        const colors = this.bgColor.join(',')
        return `background-image: linear-gradient(${this.direction}, ${colors});`
      }
    }
  }
}
</script>

<style scoped lang="scss">
.l-navigation-bar-box{
  @include position(sticky,$top:0,$left:0,$right:0);
  z-index:9999;
}

.l-navigation-bar{
  height:44px;
}
</style>
